<template>
    <div class="payment">
        <div class="panel">
            <div class="panel-header">
                <i class="fa fa-university" aria-hidden="true"></i> 小东北果蔬
            </div>
            <div class="panel-body">
                <input type="number" placeholder="请输入金额" />
            </div>
            <div class="panel-footer">
                添加付款备注
            </div>
        </div>
        <div class="coupon">
            <div class="select">                <div class="name">优惠券</div>
                <div class="value">-5.0</div>
            </div>
        </div>
<!--        <el-divider class="bottom-line" content-position="center">信无线</el-divider>-->
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    mounted() {},
    methods:{

    }
}
</script>

<style lang="less" scoped>
@media screen and (max-width:540px){
    .payment{
        width:100%;
    }
}
@media screen and (min-width:540px) {
    .payment{
        width:540px;
        margin:0 auto;
    }
}
.payment{
    height:100%;
    background:#F7F7F7;
    position:relative;
    display:inline-block;
    .panel{
        margin:15px 15px 15px 15px;
        .panel-header{
            height:35px;
            line-height:35px;
            display:flex;
            align-items:center;
            font-size:14px;
            padding:0px 15px;
            i{
                color:#F4BA5A;
                margin-right:10px;
            }
        }
        .panel-body{
            background:#fff;
            height:55px;
            border-bottom:1px dashed #e8e8e8;
            overflow:hidden;
            input{
                height:55px;
                line-height:55px;
                width:99%;
                border:none;
                outline:none;
                text-align:right;
                font-size:40px;
                color:#999;
            }
            input::-webkit-input-placeholder{
                font-size:14px;
                color:#e8e8e8;
                line-height:40px;
            }
        }
        .panel-footer{
            background:#fff;
            height:35px;
            line-height:35px;
            font-size:12px;
            padding:0px 15px;
            color:#ccc;
        }
    }
    .coupon{
        border:1px solid #D7D7D7;
        height:45px;
        line-height:45px;
        margin:0px 15px;
        background:#fff;
        border-radius:15px;
        padding:0px 15px;
        .select{
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            font-size:13px;
            color:#333;
        }
    }
    .bottom-line{
        position:absolute;
        bottom:50px;
        ::v-deep(.el-divider__text) is-center{
            background:none;
        }
    }
}
</style>
